import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';

class Pro extends React.Component {
  static defaultProps = {
    dataSource: {},
    columns: [
      // { label: '市政工程', unit: '项', field: 'civicism', child: [{ label: '新建', field: 'build' }, { label: '在建', field: 'building' }, { label: '完成', field: 'built' }]},
      // { label: '接水工程', unit: '项', field: 'connection', child: [{ label: '新建', field: 'build' }, { label: '在建', field: 'building' }, { label: '完成', field: 'built' }]},
      // { label: '完成设计', unit: '项', field: 'Finished', child: [{ label: '市政', field: 'civicism' }, { label: '接水', field: 'connection' }]},
      // { label: '合同签订', unit: '项', field: 'Contract', child: [{ label: '市政', field: 'civicism' }, { label: '接水', field: 'connection' }]},
      // { label: '竣工验收', unit: '项', field: 'Acceptance', child: [{ label: '市政', field: 'civicism' }, { label: '接水', field: 'connection' }]},
      // { label: '新建工程', unit: '项', field: 'NewProject', child: [{ label: '市政', field: 'civicism' }, { label: '接水', field: 'connection' }]},
    ],
    valField: 'total',
    colorful: false
  }

  renderChild(options, resource){
    let { children } = this.props;
    if (options && options.length > 0) {
      children = options.map((option,idx) => {
        const { label, field } = option;
        return (<span key={idx}>{label} {resource && (resource[field] || resource[field] === 0) ? resource[field] : '-'}</span>)
      })
    }
    return (<div className={styles.list}>{children}</div>)
  }

  render() {
    const { columns, className, dataSource, valField } = this.props;
    

    return (
      <div className={`${styles.Pro} clearfix`}>
        {
          columns.map((ele,index) =>{
            const { unit, field, label, child } = ele;
            const data = dataSource[field]
            return (
            <div key={index} className={`${styles.items} ${styles[className]}`}>
              <div className={styles.inner}>
              <div className={styles.text}>
                {label} <span>({unit})</span> <b>{data || data === 0 ? data[valField] : '--'}</b>
              </div>
                {this.renderChild(child, data)}
              </div>
            </div>)
          })
        }
        
      </div>
    );
  }
}

Pro.propTypes = {
  columns: PropTypes.array,
  colorful: PropTypes.bool,
  icon: PropTypes.string,
}

export default Pro;